<template>
  <div class="mod-config">
    <basic-container>
      <navigationHeTong
        :sign="{ a: false, b: false, c: true, d: false, e: false, f: false }"
      ></navigationHeTong>
      <div v-if="zhiShow == 1" class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="发约人姓名">
                <el-input
                  v-model="dataForm.fayueName"
                  placeholder="发约人姓名"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="发约人职务">
                <el-input
                  v-model="dataForm.fayueZhiwu"
                  placeholder="发约人职务"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="受约人">
                <el-input
                  v-model="dataForm.shouyueName"
                  placeholder="受约人"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="受约人职务">
                <el-input
                  v-model="dataForm.shouyueZhiwu"
                  placeholder="受约人职务"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="合同状态">
                <el-select
                  v-model="dataForm.contractAuditStatus"
                  placeholder="请选择"
                  :clearable="true"
                >
                  <el-option value="999" label="全部"></el-option>
                  <el-option value="10" label="履约中"></el-option>
                  <el-option value="11" label="结果填报中"></el-option>
                  <el-option value="111" label="填报审核驳回"></el-option>
                  <el-option value="12" label="结果填报审核中"></el-option>
                  <el-option value="13" label="结果汇总完成"></el-option>
                  <el-option value="14" label="领导审核中"></el-option>
                  <el-option value="15" label="领导审核完成"></el-option>
                  <el-option value="16" label="已结束"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="avue-crud">
          <div style="border-top: 1px solid #b0bde2">
            <div class="mt10">
              业绩合同
              <span>
                <el-radio v-model="radio" label="1">个人</el-radio>
                <el-radio v-model="radio" label="2">机构</el-radio>
              </span>
              <span style="margin-left: 160px" v-if="permissions.hetongrenwu_hetonghtxxdjb_scope">
                数据范围
                <el-radio-group v-model="radioTwo">
                  <el-radio
                    v-for="(item, index) in radioTwoList"
                    :label="item.value"
                    :key="index"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </span>
              <div style="float: right">
                <el-button plain type="primary" @click="exportExcel">
                  批量导出</el-button
                >
              </div>
            </div>
          </div>

          <el-table
            ref="reftable"
            style="width: 100%; margin-top: 20px"
            :data="dataList"
            v-if="rednermsg"
            border
            v-loading="dataListLoading"
            @row-click="unfoldBtn"
          >
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              type="index"
              width="80"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="contractName"
              header-align="center"
              show-overflow-tooltip
              align="center"
              min-width="200"
              label="合同名称"
            >
              <template slot-scope="scope">
                <span
                  @click="checkDetailsChakan(scope.row)"
                  style="color: #0e258c; cursor: pointer"
                  >{{ scope.row.contractName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 2"
              prop="jigouName"
              header-align="center"
              show-overflow-tooltip
              align="center"
              label="机构名称"
            ></el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueCode"
              header-align="center"
              align="center"
              min-width="150"
              label="受约人编号"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueCode.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.shouyueCode).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.shouyueCode).length"
                    :max="9"
                    v-if="
                      cutout(scope.row.shouyueCode).length > 2 && index === 0
                    "
                    class="itembadge"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueName"
              header-align="center"
              align="center"
              min-width="120"
              label="受约人姓名"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.shouyueName).slice(
                    0,
                    2
                  )"
                  :key="index + 444"
                >
                  <el-badge
                    :value="cutout(scope.row.shouyueName).length"
                    :max="9"
                    v-if="
                      cutout(scope.row.shouyueName).length > 2 && index === 0
                    "
                    style="margin-top: 10px; margin-right: 0px"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueDeptName"
              header-align="center"
              align="center"
              min-width="150"
              label="受约人单位"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueDeptName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(
                    scope.row.shouyueDeptName
                  ).slice(0, 2)"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.shouyueDeptName).length"
                    :max="9"
                    v-if="
                      cutout(scope.row.shouyueDeptName).length > 2 &&
                      index === 0
                    "
                    class="itembadge"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1 && shows == 1"
              prop="shouyueZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="受约人岗位"
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至受约人职级">
                  <span
                    ><i
                      @click="switchBtn(2)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人岗位</span
                  >
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueZhiwu.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.shouyueZhiwu).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-tooltip
                    class="item"
                    :disabled="
                      item.length < 8 &&
                      cutout(scope.row.shouyueZhiwu).length < 3
                    "
                    effect="dark"
                    :content="scope.row.shouyueZhiwu"
                    placement="top-start"
                  >
                    <span>{{
                      validatenull(item) ? "-" : item | ellipsis
                    }}</span>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1 && shows == 2"
              prop="ryZjmc"
              header-align="center"
              align="center"
              min-width="180"
              label="受约人职级"
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至受约人岗位">
                  <span
                    ><i
                      @click="switchBtn(1)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人职级</span
                  >
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="fayueName"
              header-align="center"
              align="center"
              min-width="120"
              label="发约人姓名"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.fayueName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.fayueName).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.fayueName).length"
                    :max="9"
                    v-if="cutout(scope.row.fayueName).length > 2 && index === 0"
                    style="margin-top: 10px; margin-right: 0px"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fayueZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="发约人岗位"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.fayueZhiwu.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.fayueZhiwu).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <span>{{
                      (validatenull(item) ? "-" : item) | ellipsis
                    }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sumZbDf"
              header-align="center"
              align="center"
              label="最终得分"
            >
              <template slot-scope="scope">
                <span v-html="getsumZbDf(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <zhibiaoForm
        ref="zhibiaoFormRef"
        v-if="zhiShow == 2"
        :zhibiaoForm="zhibiaoForm"
        :hetong="hetong"
        :hetongId="hetongId"
        v-on:zhibiaoChild="zhibiaoChild"
      ></zhibiaoForm>
      <!-- <genzongForm :genzongForm='genzongForm'></genzongForm> -->
      <tianbaoTable
        v-if="zhiShow == 3"
        :tianBaoTable="tianBaoTable"
        v-on:zhibiaoChild="zhibiaoChild"
      ></tianbaoTable>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  delObj,
  radioTwoList,
} from "@/api/hetongrenwu/hetonghtxxdjb";
import {
  page,
  chakanExportExcel,
  selectpages,
} from "@/api/hetongrenwu/hetongyeji/hetongnd";
import { mapGetters } from "vuex";
import zhibiaoForm from "@/views/hetongrenwu/components/zhibiao-chakan-form.vue";
// import genzongForm from '@/views/hetongrenwu/components/genzong-form.vue'
import tianbaoTable from "@/views/hetongrenwu/components/tianbao-table.vue";
import { validatenull } from "@/util/validate";
import { exportExcel, checkSign } from "@/api/hetongrenwu/hetongjghz";
export default {
  components: {
    zhibiaoForm,
    // genzongForm,
    tianbaoTable,
  },
  data() {
    return {
      hetong: {},
      hetongId: Number,
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio: "1",
      radioTwo: "-1",
      zhiShow: 1,
      zhibiaoForm: {},
      // genzongForm:{},
      searchadvanced: true,
      searchheight: "0",
      tianBaoTable: {},
      radioTwoList: radioTwoList,
      shows: 1,
      rednermsg: true,
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo = params.radioTwo;
    }
    this.getDataList();
  },
  watch: {
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
    radioTwo(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    unfoldBtn(row) {
      row.rowshows = !row.rowshows;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
    //批量查看
    piLiang() {
      this.zhiShow = 3;
      this.tianBaoTable = {
        lastPage: "htck",
      };
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    //合同跟踪
    tracking() {
      // this.genzongForm={
      //   dialogVisible:true
      // }
    },
    //查看
    checkDetailsChakan(row) {
      this.zhiShow = 2;
      this.hetongId = row.id;
      this.hetong = row;
      ////console.log("this.hetong:"+JSON.stringify(this.hetong))
      this.zhibiaoForm = {
        enter: 1,
        disabled: false,
        formName: "htck",
      };
      this.$nextTick(() => {
        this.$refs.zhibiaoFormRef.getDataList();
        this.$refs.zhibiaoFormRef.kuHidde();
      });
    },
    //子集信息
    zhibiaoChild(zhibiaoChild) {
      if (zhibiaoChild) {
        this.zhiShow = 1;
        this.getDataList();
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      ////console.log(this.pageIndex,this.pageSize)
      var params = {
        current: this.pageIndex,
        size: this.pageSize,
        type: this.radio,
        isbenbu: this.radioTwo,
        shouyueName: this.dataForm.shouyueName,
        fayueName: this.dataForm.fayueName,
        fayueZhiwu: this.dataForm.fayueZhiwu,
        shouyueZhiwu: this.dataForm.shouyueZhiwu,
        contractAuditStatus:this.dataForm.contractAuditStatus,
      };
      selectpages(params)
        .then((response) => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
          this.dataListLoading = false;
          this.dataList.forEach((ele) => {
            ele.rowshows = true;
          });
        })
        .catch((res) => {
          this.dataListLoading = false;
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      ////console.log(val+"==dddd==")
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      ////console.log(val+"====")
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        return cellValue.split(",");
      } else {
        return "-";
      }
    },
    getsumZbDf(dfvalue) {
      if (dfvalue.contractAuditStatus == 16) return dfvalue.sumZbDf;
      else return "-";
    },
    //判空
    validatenull(val) {
      return validatenull(val);
    },
    //导出
    exportExcel() {
      var data = this.$refs.reftable.selection;
      if (data.length == 0) {
        this.$message.closeAll();
        this.$message.error("请选择一个合同！");
        return;
      }
      var ids = [];
      for (var i = 0; i < data.length; i++) {
        ids.push(data[i].id);
      }
      var filename = "";
      if (ids.length > 1) {
        filename = "业绩合同查看.zip";
      } else {
        filename = "业绩合同查看" + data[0].contractName + ".zip";
      }
      checkSign(ids).then((res) => {
        if (res.data.data == "true") {
          this.commonDaiyn(ids,filename)
        } else {
          this.$confirm(res.data.data+',是否确认导出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.commonDaiyn(ids,filename)
          }).catch(() => {
          })
        }
      });
    },
    commonDaiyn(ids,filename){
      exportExcel({ ids: ids }).then((response) => {
            this.$message.closeAll();
            this.$message.success("操作成功!");
            let url = window.URL.createObjectURL(new Blob([response.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", filename);
            document.body.appendChild(link);
            link.click();
          });
    },
    //切换显示受约人职务和受约人职级
    switchBtn(e) {
      this.shows = e;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
  },
};
</script>
